<!--  -->
<template>
  <div class="profile">
    <nav-bar class="profile_title">
      <div slot="center">美丽说</div>
    </nav-bar>
    <div class="login">
      <span class="touxiang"></span>
      <p>登录/注册</p>
      <p class="phone">
        <img src="~assets/img/profile/phone.svg" alt="">
        暂无绑定手机号</p>
      <span class="right">
      </span>
    </div>
    <div class="show">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar"
export default {
  components:{
    NavBar
  }
}

</script>
<style scoped>
.profile_title{
  background-color: var(--color-tint);
  color: #fff;
}
.login{
  position: relative;
  height: 80px;
  background-color: var(--color-tint);
  color: #fff;
  padding: 20px;
}
.touxiang{
  float: left;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:url("~assets/img/profile/avatar.svg") no-repeat center center;
  background-size: 64px;
  margin-right:5px;
  margin-top:-12px;
}
.phone{
  margin-top:3px;
  font-size: 12px;
}
.phone img{
  width: 20px;
  vertical-align: middle;
}
.right{
  float: right;
  width: 8px;
  height: 8px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  transform: rotateZ(45deg);
  position: absolute;
  right: 30px;
  bottom: 37px;

}
.show{
  display: flex;
  justify-content: space-around;
  height: 80px;
  border-bottom: 10px solid #ccc;
}
</style>